/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableBody, TableRow, Cell, CCell, TableHead, useTheme, Button, Collapse
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import {ReportViewProps, ReportViewSubProps} from "../../common/base";
import {分项末尾链接,} from "../../common/rarelyVary";
import {multilines2Html} from "../../tools";
import {eqpTypeAllMap} from "../../../dict/eqpComm";
import {TOFD图谱, 检测示意图} from "./repView";
import {useMainRepUrlOr, useSplitSubCapacity, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";

//老版本的ReportView 和 OriginalView全都需要改造：不然Hook报错。
/**@param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * 只要是公共的模板：那modelConfigs.ts就不能少了配置该模板代码。
 * */
export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx ,...other}
) => {
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=useSplitSubCapacity(parentOrc?._TOFD_TS?.length,1);       //【模板敲定一次性最大几个分项显示出来】有些分项报告模板可能存在很多个分项 最多1个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._TOFD_TS ?? [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;
    return (
        <React.Fragment>
            <div  id="rp_tofd_"  css={{"@media not print": {marginTop:'1rem', marginBottom: '1rem'},}}>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/TOFD_TS/_Controller`}>
                    <div css={{"@media print":{display: 'none'} }}>
                        <Button>{(repId===rep?.id && rep?.modeltype!=='TOFD_TS')? '内嵌式的':'独立流转的'}TOFD检测报告分项控制器</Button>
                    </div>
                </DirectLink>
                {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
                    const [isDisplay, bindBtn]=btnBindUses[ak];      //不要加上 tabIndex={0} 超过折叠区域最大数量的？
                    //可折叠区的：独立流转的报告，和内嵌分项的，实际还分开的。两者独自控制折叠的。内嵌分项rep.id相等，独立流转的却不等的ID;
                    return <React.Fragment key={ak}>
                        <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                            { <Text variant="h4">{`TOFD检测折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                        </div>
                        <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                            { areaIdAs[ak]?.map((surpId: any, m:number) => {
                                const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                                return <OneSubRepView key={m} fxIdx={fxIdx} dispIdx={dispIdx} rep={rep} repId={repId}
                                                      verId={verId} parentOrc={parentOrc} surpId={surpId}/>
                            }) }
                            <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                                <Text variant="h4">{`TOFD检测折叠区${ak+1}结束,收起`}</Text>
                            </div>
                        </Collapse>
                    </React.Fragment>
                })}
            </div>
            {分项末尾链接({template:'TOFD_TS', repId: repId||'',verId,urlMainRep,
                nestIn:'TOFD_TS'!==routeTemplate, flowNest: repId!==rep?.id}) }
        </React.Fragment>
    );
}
//顺序？检测示意图: 都放到后面。  # 人员级别行位置？
/**@param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * 【分项表格】 【分项助手】 可重复分项  JSON.parse(parentOrc?._tblFixed??'[]')   【分项工具】 非主报告底下的。
 * */
const OneSubRepView: React.FunctionComponent<ReportViewSubProps> = (
    {fxIdx,dispIdx,rep,repId,verId,parentOrc,surpId}
) => {
    const theme= useTheme();
    const orc=parentOrc['_TOFD_TS_'+surpId];
    // const [firstNode,_S]=useThreeColumnSubr({orc, config:config测量仪,parentOrc,slash:true,href:`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Instrument`});
    //【注意】独立流转的情形：parentOrc不用orc，直接引用父报告的台账字段。分项报告只能约束到特定标号的分项对象底下提取的，所以没有像主报告一样能读到 # orc=parentOrc['_SONIC_TS_'+surpId];。
    //[['设备名称', '_$设备名称'], ['部件名称', '部件名称'] ],必须从上级的 _$设备名称 _$eqpcod，才能提取：
    return <React.Fragment>
        <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>衍射时差法超声检测报告{dispIdx ? '-' + dispIdx : ''}</Text>
            <div css={{
                display: 'flex',
                justifyContent: 'space-between'
            }}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["11.6%","%","11.6%","21.6%","11.6%","21.6%"] }  tight miniw={800}
                       css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}}>
            <TableBody>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/PartName`}>
                    <TableRow>
                        <CCell>设备名称</CCell>
                        <CCell>{parentOrc?.设备名称}</CCell>
                        <CCell>设备编号</CCell>
                        <CCell>{parentOrc?.出厂编号}</CCell>
                        <CCell>设备类别</CCell>
                        <CCell>{eqpTypeAllMap.get(parentOrc?.设备类别)}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>部件名称</CCell>
                        <CCell>{orc?.部件名称}</CCell>
                        <CCell>部件编号</CCell>
                        <CCell>{orc?.部件编号}</CCell>
                        <CCell>材质</CCell>
                        <CCell>{orc?.材质}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>规格尺寸</CCell>
                        <CCell>{orc?.规格尺寸}</CCell>
                        <CCell>坡口型式</CCell>
                        <CCell>{orc?.坡口型式}</CCell>
                        <CCell>焊接方法</CCell>
                        <CCell>{orc?.焊接方法}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>热处理状态</CCell>
                        <CCell>{orc?.热处理}</CCell>
                        <CCell>检测部位</CCell>
                        <CCell>{orc?.检测部位}</CCell>
                        <CCell>检测比例</CCell>
                        <CCell>{orc?.检测比例}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检测时机</CCell>
                        <CCell>{orc?.检测时机}</CCell>
                        <CCell>表面状态</CCell>
                        <CCell>{orc?.表面状态}</CCell>
                        <CCell>工件温度</CCell>
                        <CCell>{orc?.工件温度}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检测标准</CCell>
                        <CCell>{orc?.检测标准}</CCell>
                        <CCell>合格级别</CCell>
                        <CCell>{orc?.合格级别}</CCell>
                        <CCell>试块型号</CCell>
                        <CCell>{orc?.试块型号}</CCell>
                    </TableRow>
                </DirectLink>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Instrument`}>
                    <TableRow>
                        <CCell>仪器型号</CCell>
                        <CCell>{orc?.仪器型号}</CCell>
                        <CCell>仪器编号</CCell>
                        <CCell>{orc?.仪器编号}</CCell>
                        <CCell>探头型号</CCell>
                        <CCell>{orc?.探头型号}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检测区域</CCell>
                        <CCell>{orc?.检测区域}</CCell>
                        <CCell>焊缝宽度</CCell>
                        <CCell>{orc?.焊缝宽度}</CCell>
                        <CCell>扫查装置</CCell>
                        <CCell>{orc?.扫查装置}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检 测 面</CCell>
                        <CCell>{orc?.检测面}</CCell>
                        <CCell>耦 合 剂</CCell>
                        <CCell>{orc?.耦合剂}</CCell>
                        <CCell>扫查方式</CCell>
                        <CCell>{orc?.扫查方式}</CCell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <Table  fixed={ ["15%","15%","3%","12.2%","20%","%"]  } css={ {borderCollapse: 'collapse' } }  tight miniw={800}>
            <TableBody>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Instrument`}>
                    <TableRow css={{"@media print": {pageBreakInside: 'avoid'} }}>
                        <CCell>检测面/底面盲区（mm）</CCell>
                        <CCell css={{borderRight: 'none'}}>{orc?.盲区1}</CCell>
                        <CCell css={{borderLeft: 'none',borderRight: 'none'}}>/</CCell>
                        <CCell css={{borderLeft: 'none'}}>{orc?.盲区2}</CCell>
                        <CCell css={{borderRight: 'none'}}>操作指导书编号</CCell>
                        <CCell css={{borderLeft: 'none'}}>{orc?.指导书}</CCell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <Table  fixed={ ["6%","14%","10%","10%","11%","10%","10%","%"]  } css={ {borderCollapse: 'collapse' } }  tight miniw={800}>
            <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Passage`}>
                <TableHead>
                    <TableRow>
                        <CCell>通道</CCell>
                        <CCell>厚度分区（mm）</CCell>
                        <CCell>频率（MHz）</CCell>
                        <CCell>晶片尺寸（mm）</CCell>
                        <CCell>楔块角度（°）</CCell>
                        <CCell>楔块延迟（μs）</CCell>
                        <CCell>PCS(mm)</CCell>
                        <CCell>时间窗口设置（μs）</CCell>
                    </TableRow>
                </TableHead>
            </DirectLink>
            <TableBody>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Passage`}>
                    { orc?.通道表?.map((o: any, i: number) => {
                        return (
                            <TableRow key={i}>
                                <CCell>{o.no}</CCell>
                                <CCell>{o.ar}</CCell>
                                <CCell>{o.hz}</CCell>
                                <CCell>{o.ch}</CCell>
                                <CCell>{o.jd}</CCell>
                                <CCell>{o.la}</CCell>
                                <CCell>{o.pc}</CCell>
                                <CCell>{o.tm}</CCell>
                            </TableRow>
                        );
                    } ) }
                </DirectLink>
            </TableBody>
        </Table>
        <Table  fixed={ ["11.6%","%","11.6%","21.6%","11.6%","21.6%"]  } css={ {borderCollapse: 'collapse' } }  tight miniw={800}>
            <TableBody>
                <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Sensitivity`}>
                    <TableRow>
                        <CCell>灵敏度设置</CCell>
                        <CCell colSpan={5}>{orc?.灵敏度}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>偏置非平行扫查偏置量(mm)</CCell>
                        <CCell>{orc?.偏置量}</CCell>
                        <CCell>偏置扫查次数</CCell>
                        <CCell>{orc?.偏置扫查}</CCell>
                        <CCell>偏置非平行扫查底面盲区(mm)</CCell>
                        <CCell>{orc?.偏置盲区}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>盲区检测</CCell>
                        <CCell colSpan={5}>{orc?.盲区检测}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>横向缺陷检测</CCell>
                        <CCell colSpan={5}>{orc?.横向缺陷}</CCell>
                    </TableRow>
                    <TableRow>
                        <Cell colSpan={6}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                                <Text css={{margin: '0 2rem'}}>检测结果：</Text><br/>{orc.检测结果 ?? '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}/>
        <div css={{"@media print": {marginTop: '-8rem', pageBreakInside: 'avoid'}}} >
            <Table fixed={ ["4%","11.5%","7%","7%","10%","12.5%","7%","7%","7%","13%","5%","23%"]  }  tight miniw={800}
                            css={{borderCollapse: 'collapse', }}>
                <TableBody>
                    <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Evaluation`}>
                        <TableRow>
                            <CCell colSpan={12}>检 测 结 果 评 定</CCell>
                        </TableRow>
                    </DirectLink>
                </TableBody>
            </Table>
            <Table  fixed={ ["4%","11.5%","7%","7%","10%","12.5%","7%","7%","7%","13%","5%","23%"] }
                                     css={ {borderCollapse: 'collapse' } }  tight miniw={800}>
                <TableHead>
                    <TableRow>
                        <CCell rowSpan={2}>序号</CCell>
                        <CCell rowSpan={2}>焊缝编号</CCell>
                        <CCell rowSpan={2}>厚度(mm)</CCell>
                        <CCell rowSpan={2}>检测长度(mm)</CCell>
                        <CCell colSpan={5}>缺陷记录（mm）</CCell>
                        <CCell rowSpan={2}>缺陷类型</CCell>
                        <CCell rowSpan={2}>评定级别</CCell>
                        <CCell rowSpan={2}>数据文件名</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>缺陷编号</CCell>
                        <CCell>缺陷位置</CCell>
                        <CCell>长度 l</CCell>
                        <CCell>深度d1</CCell>
                        <CCell>高度h</CCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Evaluation`}>
                        { orc?.评定表?.map((o: any, i: number) => {
                            return (
                                <TableRow key={i}>
                                    <CCell>{i+1}</CCell>
                                    <CCell>{o.wd}</CCell>
                                    <CCell>{o.th}</CCell>
                                    <CCell>{o.cl}</CCell>
                                    <CCell>{o.nm}</CCell>
                                    <CCell>{o.po}</CCell>
                                    <CCell>{o.l}</CCell>
                                    <CCell>{o.d}</CCell>
                                    <CCell>{o.h}</CCell>
                                    <CCell>{o.t}</CCell>
                                    <CCell>{o.c}</CCell>
                                    <CCell css={{"@media print": {pageBreakInside: 'avoid' } }}>{o.f}</CCell>
                                </TableRow>
                            );
                        } ) }
                    </DirectLink>
                </TableBody>
            </Table>
        </div>
        <Table fixed={ ["9%","%","9%","18%","7%","14%"]  }  css={ {borderCollapse: 'collapse' }}  tight miniw={800}>
            <TableBody>
                <TableRow>
                    <CCell>检验：</CCell><CCell></CCell>
                    <CCell>级别</CCell><CCell>UT－Ⅱ</CCell><CCell>日期</CCell><CCell>2024-03-20</CCell>
                </TableRow>
                <TableRow>
                    <CCell>审核：</CCell><CCell></CCell>
                    <CCell>级别</CCell><CCell>UT－Ⅲ</CCell><CCell>日期</CCell><CCell>2024-03-22</CCell>
                </TableRow>
            </TableBody>
        </Table>
        {检测示意图({orc, rep, href:`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Schematic` })}
        <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Schematic`}>
            <Button variant="ghost" intent='primary'  css={{"@media print": {display: 'none'} }}  noBind
            >改 检测示意图：{rep.isp.no}</Button>
        </DirectLink>
        {TOFD图谱({theme, orc, rep, href:`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Spectrum`} )}
        <DirectLink  href={`/report/TOFD_TS/ver/${verId}/${repId}/${surpId}/Spectrum`}>
            <Button variant="ghost" intent='primary'  css={{"@media print": {display: 'none'} }}  noBind
            >改 TOFD图谱：{rep.isp.no}</Button>
        </DirectLink>
    </React.Fragment>;
}
